/* --- Font faces --- */
@font-face {
  font-family: 'TiemposHeadline-Light';
  src: url('TiemposHeadline-Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'TiemposHeadline-LightItalic';
  src: url('TiemposHeadline-LightItalic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'AvenirNextLTPro-Regular';
  src: url('AvenirNextLTPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* --- Font application --- */

/* Headings use Tiempos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'TiemposHeadline-Light', 'AvenirNextLTPro-Regular', sans-serif !important;
}

/* Override heading font inside nav */
nav h1,
nav h2,
nav h3,
nav h4,
nav h5,
nav h6 {
  font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
}


/* Italics use the italic variant of Tiempos */
em, i, .italic {
  font-family: 'TiemposHeadline-LightItalic', 'AvenirNextLTPro-Regular', sans-serif !important;
  font-style: italic!important;
}

/* Base font for everything text-like, excluding icons */
body, 
p, 
span:not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fa-check), 
a, 
li, 
input, 
textarea, 
button, 
select, 
label, 
div:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
  font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
}

/* ==========================================================================
   GENERAL DATEPICKER STYLING
   ========================================================================== */

/* Main dropdown container (entire popup background) */
.bootstrap-datetimepicker-widget.dropdown-menu {
  background-color: #f9f6e0 !important; /* light beige background */
}

/* Tables used for days, months, and years views */
.bootstrap-datetimepicker-widget table {
  background-color: #f9f6e0 !important; /* unify background color across views */
}

/* ==========================================================================
   CALENDAR GRID (DAYS / MONTHS / YEARS)
   ========================================================================== */

/* Normal day cells and their buttons */
.bootstrap-datetimepicker-widget table td.day,
.bootstrap-datetimepicker-widget table td.day button {
  background-color: #f9f6e0 !important; /* consistent background */
}

/* Hover state for day buttons (mouse over) */
.bootstrap-datetimepicker-widget table td.day button:hover {
  background-color: #285c4b !important; /* dark green hover effect */
  color: #fff !important;               /* ensure text stays readable */
}

/* Old, new, or disabled day cells (grayed-out days from adjacent months) */
.bootstrap-datetimepicker-widget table td.old button,
.bootstrap-datetimepicker-widget table td.new button,
.bootstrap-datetimepicker-widget table td.disabled button {
  background-color: #f9f6e0 !important; /* keep neutral background */
  opacity: 0.5;                         /* visually differentiate */
  cursor: not-allowed;                  /* indicate non-clickable */
}

/* Currently active/selected date */
.bootstrap-datetimepicker-widget tr td.active button {
  color: #000 !important; /* black text for better visibility */
  font-weight: bold;
}

/* ==========================================================================
   TIME PICKER CONTROLS (HOURS / MINUTES / UP-DOWN ARROWS)
   ========================================================================== */

/* Overall timepicker background */
.bootstrap-datetimepicker-widget .timepicker,
.bootstrap-datetimepicker-widget .timepicker-picker {
  background-color: #f9f6e0 !important; /* match theme background */
  border-radius: 8px;
}

/* Up/down arrow controls (hour/minute increment/decrement) */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementHours"],
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementMinutes"],
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementHours"],
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementMinutes"] {
  display: inline-block;
  background-color: #f9f6e0;
  border-radius: 6px;
  padding: 4px 6px;
  color: #285c4b;
  transition: all 0.2s ease-in-out;
}

/* Hover effect for arrow controls */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementHours"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementMinutes"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementHours"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementMinutes"]:hover {
  background-color: #285c4b !important; /* deep green */
  color: #fff !important;
}

/* Hour and minute text display (the "09" and "29") */
.bootstrap-datetimepicker-widget .timepicker-picker .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-picker .timepicker-minute {
  background-color: #f9f6e0 !important;
  color: #000 !important;
  border-radius: 4px;
  padding: 4px 6px;
}

/* Hover effect when switching between hour/minute selection */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="showHours"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="showMinutes"]:hover {
  background-color: #285c4b !important;
  color: #fff !important;
  border-radius: 4px;
}

/* AM/PM toggle button */
.bootstrap-datetimepicker-widget .timepicker .btn[data-action="togglePeriod"] {
  background-color: #f9f6e0 !important;
  color: #333 !important;
  border: 1px solid #d6d2b0 !important;
  transition: all 0.2s ease-in-out;
}

/* Hover effect for AM/PM toggle button */
.bootstrap-datetimepicker-widget .timepicker .btn[data-action="togglePeriod"]:hover {
  background-color: #285c4b !important;
  color: #fff !important;
  border-color: #285c4b !important;
}

/* Active hour/minute selection inside time grid */
.bootstrap-datetimepicker-widget .timepicker-hours a.active,
.bootstrap-datetimepicker-widget .timepicker-minutes a.active {
  background-color: #285c4b !important;
  color: #fff !important;
  border-radius: 4px;
}

/* Hover effect for selectable hour/minute links */
.bootstrap-datetimepicker-widget .timepicker-hours a.hour:hover,
.bootstrap-datetimepicker-widget .timepicker-minutes a.minute:hover {
  background-color: #285c4b !important;
  color: #fff !important;
  border-radius: 4px;
}

/* ==========================================================================
   FIX: Remove Bootstrap gray hover and enforce custom colors
   ========================================================================== */

/* Base style for increment/decrement arrow buttons */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementHours"],
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementMinutes"],
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementHours"],
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementMinutes"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f6e0 !important; /* light beige base */
  border-radius: 6px;
  padding: 6px;
  color: #285c4b !important;            /* deep green icon color */
  text-decoration: none !important;     /* remove underline */
  box-shadow: none !important;          /* remove Bootstrap button shadows */
  border: none !important;              /* no default border */
  outline: none !important;             /* prevent focus outline */
  transition: all 0.2s ease-in-out;
}

/* Hover state — deep green background with white icon */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementHours"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="incrementMinutes"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementHours"]:hover,
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action="decrementMinutes"]:hover {
  background-color: #285c4b !important;
  color: #fff !important;
  text-decoration: none !important;     /* prevent Bootstrap hover underline */
}

/* Remove gray background on icons (Font Awesome fix) */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action] span {
  background: transparent !important;
  color: inherit !important;
}

/* Hover fix for icons (ensures no gray background remains) */
.bootstrap-datetimepicker-widget .timepicker-picker a[data-action]:hover span {
  background: transparent !important;
  color: #fff !important;
}

/* ==========================================================================
   CALENDAR HEADER: Month, Year, Decade Navigation
   ========================================================================== */

/* Base style for prev/next and month/year/decade switch buttons */
.bootstrap-datetimepicker-widget .datepicker th button {
  background-color: #f9f6e0 !important;  /* soft beige */
  color: #285c4b !important;             /* deep green text/icon */
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s ease-in-out;
}

/* Remove Bootstrap gray hover and focus states */
.bootstrap-datetimepicker-widget .datepicker th button:hover,
.bootstrap-datetimepicker-widget .datepicker th button:focus {
  background-color: #285c4b !important;  /* deep green background */
  color: #fff !important;                /* white text/icon */
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure icons (chevrons) adopt the color correctly */
.bootstrap-datetimepicker-widget .datepicker th button span {
  color: inherit !important;
  background: transparent !important;
}

/* Hover fix for icons */
.bootstrap-datetimepicker-widget .datepicker th button:hover span {
  color: #fff !important;
  background: transparent !important;
}

/* Optional: Adjust the overall header spacing for a cleaner look */
.bootstrap-datetimepicker-widget .datepicker th {
  padding: 4px !important;
  background: transparent !important;
  border: none !important;
}

/* ==========================================================================
   YEAR SELECTION GRID (e.g., 2020–2031)
   ========================================================================== */

/* General reset for both month and year cells */
.bootstrap-datetimepicker-widget .datepicker-months span.month,
.bootstrap-datetimepicker-widget .datepicker-years span.year {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Buttons inside month & year spans */
.bootstrap-datetimepicker-widget .datepicker-months span.month button,
.bootstrap-datetimepicker-widget .datepicker-years span.year button {
  background-color: #f9f6e0 !important;  /* beige base */
  color: #285c4b !important;              /* deep green text */
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin: 4px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  outline: none !important;
  transition: all 0.2s ease-in-out;
}

/* Hover & focus states */
.bootstrap-datetimepicker-widget .datepicker-months span.month button:hover,
.bootstrap-datetimepicker-widget .datepicker-months span.month button:focus,
.bootstrap-datetimepicker-widget .datepicker-years span.year button:hover,
.bootstrap-datetimepicker-widget .datepicker-years span.year button:focus {
  background-color: #285c4b !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* Active (currently selected) */
.bootstrap-datetimepicker-widget .datepicker-months span.month.active button,
.bootstrap-datetimepicker-widget .datepicker-years span.year.active button {
  background-color: #285c4b !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Disabled */
.bootstrap-datetimepicker-widget .datepicker-months span.month.disabled button,
.bootstrap-datetimepicker-widget .datepicker-years span.year.disabled button {
  background-color: #f9f6e0 !important;
  color: #bcbcbc !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Ensure no hover gray leaks from disabled */
.bootstrap-datetimepicker-widget .datepicker-months span.month.disabled button:hover,
.bootstrap-datetimepicker-widget .datepicker-years span.year.disabled button:hover {
  background-color: #f9f6e0 !important;
  color: #bcbcbc !important;
}

/* Reset span background from Bootstrap .active, .focused, .disabled */
.bootstrap-datetimepicker-widget .datepicker-months span.month.active,
.bootstrap-datetimepicker-widget .datepicker-months span.month:focus,
.bootstrap-datetimepicker-widget .datepicker-months span.month:hover,
.bootstrap-datetimepicker-widget .datepicker-years span.year.active,
.bootstrap-datetimepicker-widget .datepicker-years span.year:focus,
.bootstrap-datetimepicker-widget .datepicker-years span.year:hover {
  background: transparent !important;
  box-shadow: none !important;
}

.list-group {
    --bs-list-group-active-bg: #285c4b!important;
    --bs-list-group-active-border-color: #285c4b!important;
}